<template>
    <cst-main-box>
        <template #form>
            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
                <el-form-item>
                    <el-input v-model="queryParams.id" placeholder="请输入序号" clearable style="width: 200px" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="queryParams.name" placeholder="请输入模板名称" clearable style="width: 200px" />
                </el-form-item>
                <el-form-item style="width: 308px">
                    <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
                        start-placeholder="创建开始日期" end-placeholder="创建结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button link @click="resetQuery">清除条件</el-button>
                </el-form-item>
            </el-form>
            <el-row :gutter="10">
                <right-toolbar v-model:showSearch="showSearch" :columns="columns" @queryTable="getList"></right-toolbar>
            </el-row>
        </template>
        <template #table>
            <el-table v-loading="loading" :data="userList" ref="tableRef">
                <el-table-column v-if="columns[0].visible" label="序号" align="center" prop="id" />
                <el-table-column v-if="columns[1].visible" label="模板名称" align="center" prop="name" />
                <el-table-column v-if="columns[2].visible" label="爱签模板ID" align="center" prop="asignNo" />
                <el-table-column v-if="columns[3].visible" label="创建日期" align="center" prop="phone"><template
                        #default="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" class-name="small-padding fixed-width label-center">
                    <template #default="scope">
                        <el-button link type="primary" @click="handleSelectContract(scope.row)"
                            v-hasPermi="['template:select:contract']">查看合同</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template #pagination>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />

                <dynamicsFrom/>
        </template>
    </cst-main-box>
</template>
<script setup name="userlist">
import CstMainBox from '@/components/cstMainBox';
import  dynamicsFrom from "./components/dynamicsFrom.vue";
const { proxy } = getCurrentInstance();
import { contractTemList } from "@/api/contract";

const showSearch = ref(true);
const tableRef = ref();
const loading = ref(true);
const total = ref(0);
const userList = ref([]);
const dateRange = ref([]);
const columns = ref([
    {
        key: 0,
        label: `序号`,
        visible: true,
    },
    {
        key: 1,
        label: `模板名称`,
        visible: true,
    },
    {
        key: 2,
        label: `爱签模板ID`,
        visible: true,
    },
    {
        key: 3,
        label: `创建时`,
        visible: true,
    },
]);
const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
    },
});

// 预览地址
const docSrc = ref("");
const { queryParams } = toRefs(data);

// 查询按钮
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
    queryParams.value = {
        pageNum: 1,
        pageSize: 10,
    };
    dateRange.value = [];
    handleQuery();
};

// 获取列表
const getList = () => {
    loading.value = true;
    contractTemList(
        proxy.addDefine(queryParams.value, dateRange.value, [
            "beginDate",
            "endDate",
        ])
    ).then((response) => {
        userList.value = response.data;
        total.value = response.total;
        loading.value = false;
    });
};

//查看合同
const handleSelectContract = (row) => {
    // docSrc.value=row.originFileUrl
    window.open(row.originFileUrl);
    // let a = document.createElement("a");
    // a.href =row.originFileUrl;

    // a.click();
};

getList();
</script>
